<template>
  <view id="home">
    <u-navbar bgColor="#00c7db" :titleStyle="titlStyle" title="点餐">
      <view class="u-nav-slot" slot="left">
        <u-icon @click="toHome" color="#fff" labelColor="#fff" labelPos="right" label="换桌" name="home" size="20"></u-icon>
      </view>
    </u-navbar>
    <header class="index_header">
      <view class="hlist">
        <u--image height="2.2rem" width="3.2rem" :src="picrexiao" mode="aspectFit"></u--image>
        <p>热销榜</p>
      </view>
      <view class="hlist">
        <u--image height="2.2rem" width="3.2rem" :src="piccaidan" mode="aspectFit"></u--image>
        <p>点过的菜</p>
      </view>
      <view class="hlist">
        <u--image height="2.2rem" width="3.2rem" :src="picsousuo" mode="aspectFit"></u--image>
        <p>搜你喜欢</p>
      </view>
    </header>
    <aside class="left_cate" :class="clMenue ? 'unfold' : 'close'" id="left_cate">
      <ul>
        <li v-for="(item, key) in list" :key="key" @click="changeList(key, item._id)">
          {{ item.name }}
        </li>
      </ul>
      <view id="nav_cate" class="nav_cate" @click="clMenueFun">
        <u--image height="1.1rem" width="2rem" :src="picnav" mode="aspectFit"></u--image>
        <p>菜单</p>
      </view>
    </aside>
    <scroll-view scroll-y="true" style="height: 1100rpx; padding: 0 0 50rpx 0" :scroll-into-view="scroll_into" scroll-with-animation>
      <view class="item" v-for="item in list" :key="item._id" :id="'text' + item._id">
        <h3 class="item_cate">{{ item.name }}</h3>
        <ul class="item_list">
          <li @click="todetails(food._id)" v-for="food in item.goodsList" :key="food._id">
            <view class="inner">
              <img :src="food.img" />
              <p class="title">{{ food.name }}</p>
              <p class="price">¥{{ food.pic }}</p>
            </view>
          </li>
        </ul>
      </view>
    </scroll-view>
    <view class="bg" :class="clMenue ? '' : 'none'" id="bg"> </view>
    <NavFooter></NavFooter>
    <view @click="toCart" id="footer_cart" class="footer_cart">
      <u--image height="1.5rem" width="1.5rem" :src="piccart" mode="aspectFit"></u--image>
      <p>购物车</p>
      <span class="num" v-if="cartNum">{{ cartNum }}</span>
    </view>
  </view>
</template>


<script>
//引入NavFooter组件
import NavFooter from "@/components/NavFooter/index.vue";
import { postGoodsList, cartCount } from "@/common/api.js";
export default {
  onLoad(option) {
    this.postGoodsListFun();
  },
  onShow() {
    this.getCartCount();
    this.socketOn()
  },
  components: {
    NavFooter,
  },
  methods: {
    socketOn() {
      let that = this;
      let roomid = uni.getStorageSync("roomid");
      that.$socket.emit('join', { roomid });
      that.$socket.on("addcart", function (data) {
        console.log("🚀 ~ file: index.vue:79 ~ data:", data)
        that.getCartCount();
      });
    },
    toHome() {
      this.$socket.emit('join', {});
      uni.$u.route(`/pages/index/index`);
      this.$store.dispatch("changeNavBar", "home");
    },
    toCart() {
      uni.$u.route(`/pages/cart/index`);
    },
    clMenueFun() {
      this.clMenue = !this.clMenue;
    },
    todetails(id) {
      uni.$u.route(`/pages/orderHome/pcontent?id=${id}`);
    },
    async postGoodsListFun() {
      let res = await postGoodsList();
      if (res.code == 200) {
        let { data: resData } = res;
        this.list = resData;
      }
    },

    changeList(key, id) {
      this.scroll_into = "text" + id;
      setTimeout(() => {
        this.scroll_into = "text";
      }, 1000);
    },
    async getCartCount() {
      let res = await cartCount({ uid: uni.getStorageSync('roomid') });
      if (res.code == 200) {
        this.cartNum = res.data.num;
      }

      /*获取购物车的数量*/

      //桌子id  桌子号：是扫描二维码从url获取的

      // var uid = storage.get('roomid');

      // var api = this.api + 'api/cartCount?uid=' + uid;

      // this.$http.get(api).then((response) => {

      //   console.log(response.body.result);

      //   this.cartNum = response.body.result;

      // }, (err) => {

      //   console.log(err);
      // })
    },
  },
  data() {
    /*数据*/
    return {
      titlStyle: { color: "#ffffff" },
      picrexiao: require("@/static/images/pages/menu/rexiao.png"),
      piccaidan: require("@/static/images/pages/menu/caidan.png"),
      picsousuo: require("@/static/images/pages/menu/sousuo.png"),
      picnav: require("@/static/images/pages/menu/nav.png"),
      piccart: require("@/static/images/pages/menu/cart.png"),
      list: [],
      cartNum: 0,
      clMenue: false,
      clBottomMenue: false,
      scroll_into: "text",
    };
  },
  // sockets: {
  // 	addcart: function() {
  // 		/*接受服务器广播过来的addcart*/
  // 		//更新购物车的数量
  // 		this.getCartCount();
  // 	}
  // },
};
</script>

<style lang="scss">
.unfold {
  // display: block;
  transition: all 0.5s;
  transform: translate(0, 0);
}

.close {
  transition: all 0.5s;
  transform: translate(-100%, 0);
  // display: none;

  // leftCate.style.transform='translate(-100%,0)';

  // 		  				bg.style.display='none';
}

.index_header {
  width: 96%;
  margin: 0 auto;
  height: 4.4rem;
  background: #fff;
  margin-top: 4rem;

  display: flex;
  border-radius: 0.5rem;

  .hlist {
    flex: 1;
    text-align: center;
    padding-top: 1rem;
    border-right: 1px solid #eee;

    /deep/ .u-image {
      margin: 0 auto;
    }

    &:last-child {
      border-right: none;
    }
  }
}

/*列表*/
.item {
  .item_cate {
    text-align: center;

    padding: 0.5rem;
  }

  .item_list {
    display: flex;

    flex-wrap: wrap;

    padding: 0px 0.5rem;

    li {
      width: 33.3%;
      padding: 0.5rem;

      box-sizing: border-box;

      .inner {
        background: #fff;
        width: 100%;
        border-radius: 0.5rem;
        overflow: hidden;

        a {
          color: #666;

          text-decoration: none;
        }

        img {
          width: 100%;

          height: 6rem;
        }

        p {
          padding: 0.2rem 0.5rem;
        }

        .title {
          font-weight: bold;
        }
      }
    }
  }
}

/*侧边栏*/

.left_cate {
  /*css3运动  加过渡效果*/
  // transition: all .5s;
  // transform: translate(-100%, 0);
  z-index: 2;
  width: 6rem;
  height: 100%;
  position: fixed;
  background: #eee;
  top: 60px;
  left: 0px;

  ul {
    position: absolute;
    height: 100%;
    padding: 0.5rem;
    z-index: 3;
    background: #eee;

    li {
      line-height: 2.2rem;
    }
  }

  .nav_cate {
    position: absolute;
    right: -2.5rem;
    background: #00c7db;
    top: 42%;
    width: 3rem;
    height: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    border-radius: 0rem 50% 50% 0rem;
    p {
      color: #fff;
      font-size: 20rpx;
    }
  }
}

/*透明层*/
.none {
  display: none;
}
.bg {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(132, 128, 128, 0.4);
  left: 0px;
  top: 0px;
  z-index: 1;
}
.footer_nav {
  background: #00c7db;
  color: #fff;
  left: 2.7rem;
}

.footer_cart {
  background: red;
  color: #fff;
  left: inherit;
  right: 0.5rem;
}
</style>